<style>
	.pagetitle { width: 100%; text-align: center; color: darkorange; text-shadow: 1px 1px 5px #999;}
	.item { width: 60px; font-size: 14px; font-weight: 600; color: #666666; cursor: pointer; }
	.item:hover { color: red;}
	.item.choosed { color: darkorange;}
	
	.users { width: 100%;  margin-top: 20px; flex-flow: row wrap; align-content: flex-start; overflow: auto;
			background-color: #eee; box-shadow: 2px 2px 6px darkgrey; padding: 20px 30px; max-height: 300px;}
	.user { width: 160px; height: 30px; font-size: 12px; margin-left: 20px; width: 480px;}
	.userselector { justify-content: center; align-items: center; margin-top: 20px;}
	.userselector > input {width: 60%; height: 28px; font-size: 14px; }
	.userselector > button { width: 60px; height 40px; margin-left: 10px; background-color: #00008B; color: white; border-radius: 5px; box-shadow: 2px 2px 4px dimgrey;}
	.waiting { text-align: center; margin-top: 20px;}
</style>
<section>
	<div id="vm">
		<h3 class="pagetitle">学员信息综合查询</h3>
		<div class="userselector line">
			<input type="search" placeholder="请输入用户的id号、姓名昵称、电话、合同号的任一项进行匹配" v-model="userselectorwords" @keypress.enter="checkusers"/>
			<button @click="checkusers" >查询</button>
		</div>
		<div class="waiting" v-if="insearch">查询中……</div>
		<div class="users line" v-if="!insearch">
			<div class="announce" v-if="users.length == 0" >没有符合条件的学员</div>
			<div v-if="users" v-for="(user, i) in users" class="user item" :class="user.user_code == userid ? 'choosed' : ''" @click="chooseuser(user.user_code)">ID：{{user.user_code}}，电话：{{user.tele}}，昵称：{{user.username}}</div>
		</div>
		
		<div class="userhistory"></div>
	</div>
</section>
<script>
	
	var vm = new Vue({
		el: '#vm',
		data: {
			userselectorwords: '',
			insearch: false,
			users: [],
			userid: '',
		},
		methods: {
			checkusers: function(){
				
				let that = this;
				if(this.userselectorwords == '') return;
				this.insearch = true;
				$(".userhistory").html("");
				post(dataDomain + "data/post.php/ksap/users/users", {"key": this.userselectorwords}, function(r){
					console.log(r)
					that.insearch = false;
					if(r.data.length == 0){
						users = []
					}else{
						that.users = r.data;
					}
					
				})
			},
			chooseuser: function(p){
				console.log(p)
				this.userid = p;
				D.userid = p;
				$(".userhistory").load('pages/users/userhistory.html');
			},
		},
		mounted: function(){
			
		}
	})
</script>